<script setup name="user">
import { HamburgerButton, Search, Play, OvalLove, AudioFile, UploadOne, Commodity, Avatar, Star, Concern, Plus, MoreOne } from '@icon-park/vue-next'
import { ref, computed } from 'vue'

import IconPark from '@/components/common/IconPark.vue'

const appList = [
  {
    icon: Play,
    name: '最近播放'
  },
  {
    icon: AudioFile,
    name: '本地下载'
  },
  {
    icon: UploadOne,
    name: '云盘',
  },
  {
    icon: Commodity,
    name: '已购'
  },
  {
    icon: Avatar,
    name: '我的好友'
  },
  {
    icon: Star,
    name: '收藏和赞'
  },
  {
    icon: Concern,
    name: '我的播客'
  },
  {
    icon: OvalLove,
    name: '乐迷团'
  }
]

const active = ref('创建歌单')

const handleScroll = event => {
  // console.log(event);
}
const imgUrl = computed(() => new URL(`@/assets/img/disc.png`, import.meta.url).pathname)
</script>

<template>
  <div class="user-page">
    <van-row class="user-page-header" align="center" justify="center">
      <van-col span="2" class="user-page-header-menu">
        <IconPark :icon="HamburgerButton" :size="7" :strokeWidth="3" />
      </van-col>
      <van-col span="20">
      </van-col>
      <van-col span="2">
        <IconPark :icon="Search" :size="6" :strokeWidth="3" />
      </van-col>
    </van-row>
    <van-row gutter="20" justify="center" class="user-info">
      <van-col span="20" class="user-info-col">
        <van-image class="user-info-col-cover" width="80" height="80" round fit="fill" :src="imgUrl" />
      </van-col>
      <van-col span="20" class="user-info-col">
        <h2>立即登录</h2>
        <van-icon name="arrow" />
      </van-col>
    </van-row>
    <van-row gutter="20" justify="center" class="user-app">
      <van-col span="5" class="user-app-col" v-for="i in appList" :key="i">
        <IconPark :icon="i.icon" :size="8" fill="red" :strokeWidth="4" theme="filled" />
        {{ i.name }}
      </van-col>
      <span class="line"></span>
      <van-col span="20" class="user-app-col">
        <van-button icon="plus" size="mini" plain hairline>音乐应用</van-button>
      </van-col>
    </van-row>
    <van-row gutter="24" justify="center" class="user-like">
      <van-col span="4" class="user-like-col">
        <van-image radius="10" width="60" height="60">

        </van-image>
      </van-col>
      <van-col span="12" class="user-like-col">
        <h3>我喜欢的音乐</h3>
        <span class="user-like-col-count">0首</span>
      </van-col>
      <van-col span="6" class="user-like-col">
        <div class="user-like-col-btn">
          <van-button icon="like-o" size="small" plain round text="心动模式" />
        </div>
      </van-col>
    </van-row>

    <van-tabs v-model:active="active" shrink swipeable sticky offset-top="56" line-width="20px" color="red"
      background="var(--reversal-singer-main)" @scroll="handleScroll">
      <van-tab title="创建歌单" class="user-song-tab">
        <van-cell class="user-song-tab-cell">
          <template #title>
            创建歌单
          </template>
          <template #label>
            <van-image radius="10" width="60" height="60">

            </van-image>
          </template>
          <template #value>
            <h4>一键导入外部音乐</h4>
          </template>
          <template #right-icon>
            <IconPark :icon="Plus" :size="6" :strokeWidth="2" theme="filled" />
          </template>
          <template #extra>
            <IconPark :icon="MoreOne" :size="6" :strokeWidth="2" theme="filled" />
          </template>
        </van-cell>
      </van-tab>
      <van-tab title="收藏歌单" class="user-song-tab">
        <van-cell class="user-song-tab-cell-collect">
          <template #title>
            收藏歌单
          </template>
          <template #label>
            <van-empty description="暂无收藏的歌单" />
          </template>
          <template #extra>
            <IconPark :icon="MoreOne" :size="6" :strokeWidth="2" theme="filled" />
          </template>
        </van-cell>
      </van-tab>
    </van-tabs>
  </div>
</template>

<style scoped lang="scss">
.user-page {
  padding-bottom: 100px;

  &-header {
    margin-bottom: 60px;
    position: sticky;
    top: 0;
    background-color: var(--color-background);
    line-height: 1;
    z-index: 1;
    height: 48px;

    &-menu {
      padding-left: 6px;
    }
  }

  .user-info {
    margin: -20px 16px 10px 16px;
    border-radius: 16px;
    padding-bottom: 10px;
    background: var(--color-background);

    &-col {
      text-align: center;

      &-cover {
        width: 70px;
        height: 70px;
        margin-top: -34px;
        transition: all .3s;
        box-shadow: 0px 0px 10px 2px var(--color-border);
      }

      h2 {
        font-weight: bold;
        display: inline-block;
        margin: 10px 0;
      }
    }
  }

  .user-app {
    border-radius: 16px;
    margin: 20px 16px 10px 16px;
    padding: 16px 0;
    background-color: var(--color-background);

    .line {
      padding-top: 10px;
      border-bottom: 1px solid #e6e6e6;
      width: 100%;
    }

    &-col {
      display: flex;
      flex-direction: column;
      align-items: center;
      font-size: 10px;
      padding: 10px 0;

      .van-button--hairline::after {
        content: none;
      }

      .van-button--hairline {
        color: var(--reversal-text);
        background: transparent;
      }

      &:last-child {
        padding-bottom: 0;
      }
    }

  }

  .user-like {
    background-color: var(--color-background);
    border-radius: 16px;
    margin: 20px 16px 10px 16px;
    padding: 16px 0;

    .van-col {
      padding: 0 !important;
    }

    &-col {
      h3 {
        font-weight: bold;
        padding-left: 10px;
      }

      &-count {
        padding-left: 10px;
        font-size: 10px;
        color: #bfc2c8;
      }

      &-btn {
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;

        .van-button--round {
          background-color: transparent;
          color: var(--reversal-text);
        }
      }
    }
  }

  .user-song-tab {
    padding: 0 16px;

    &-cell {
      border-radius: 16px;
      background-color: var(--color-background);

      &-collect {
        background-color: var(--color-background);
        border-radius: 16px;
      }

      :deep(.van-cell__title) {
        flex: 0;
        color: var(--vt-c-info-text);
      }

      :deep(.van-cell__value) {
        display: flex;
        align-items: center;
        padding-left: 10px;
        color: var(--reversal-text);
      }
    }

  }

  :deep(.van-tabs__nav--line) {
    justify-content: center;
  }

  :deep(.van-tabs__line) {
    bottom: 6vw;
  }

  :deep(.van-tab--active) {
    color: var(--reversal-text);
  }
}
</style>
